<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router";

// 导入职业图片
import roleImg01 from '@/assets/role-img01.webp';
import roleImg02 from '@/assets/role-img02.webp';
import roleImg03 from '@/assets/role-img03.webp';
import roleImg04 from '@/assets/role-img04.webp';
import roleImg05 from '@/assets/role-img05.webp';
import roleImg06 from '@/assets/role-img06.webp';
import roleImg07 from '@/assets/role-img07.webp';
import roleImg08 from '@/assets/role-img08.webp';
import roleImg09 from '@/assets/role-img09.webp';

document.title = "3D资源分享站 - 特工职业资源中心";

const professions = [
  { 
    id: 'blade_point', 
    title: "刀锋", 
    href: "/gunz2/characters/agent/blade_point", 
    description: "近战刺客，擅长隐身突袭，飞檐走壁",
    icon: roleImg01
  },
  { 
    id: 'flame', 
    title: "烈焰", 
    href: "/gunz2/characters/agent/flame", 
    description: "火焰法师，掌控火元素力量，范围攻击",
    icon: roleImg04
  },
  { 
    id: 'double_gun', 
    title: "双枪", 
    href: "/gunz2/characters/agent/double_gun", 
    description: "双持枪手，高机动性，快速射击",
    icon: roleImg02
  },
  { 
    id: 'machine_gun', 
    title: "机枪", 
    href: "/gunz2/characters/agent/machine_gun", 
    description: "重火力压制，持续输出，火力覆盖",
    icon: roleImg05
  },
  { 
    id: 'guided_missile', 
    title: "导弹", 
    href: "/gunz2/characters/agent/guided_missile", 
    description: "远程轰炸，范围伤害，精确制导",
    icon: roleImg06
  },
  { 
    id: 'sniper', 
    title: "狙击", 
    href: "/gunz2/characters/agent/sniper", 
    description: "远程狙击，精准打击，一击必杀",
    icon: roleImg03
  },
  { 
    id: 'medic', 
    title: "医生", 
    href: "/gunz2/characters/agent/medic", 
    description: "治疗支援，团队保障，生命守护",
    icon: roleImg07
  },
  { 
    id: 'grenade', 
    title: "榴弹", 
    href: "/gunz2/characters/agent/grenade", 
    description: "爆炸专家，范围控制，火力压制",
    icon: roleImg08
  },
  { 
    id: 'engineer', 
    title: "工程师", 
    href: "/gunz2/characters/agent/engineer", 
    description: "技术专家，装备支援，战术辅助",
    icon: roleImg09
  }
];

const run = ref(true);
const goTo = (href) => {
  run.value = !run.value;
  location.href = href;
};

// 处理图片加载错误
const handleImageError = (event) => {
  console.warn('职业图片加载失败:', event.target.style.backgroundImage);
  // 设置默认图片
  event.target.style.backgroundImage = `url(${roleImg01})`;
};
</script>

<template>
  <div class="profession-list-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="$router.push('/index')">首页</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item" @click="$router.push('/gunz2')">枪神纪</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item" @click="$router.push('/gunz2/characters')">角色模型</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item" @click="$router.push('/gunz2/characters/agent')">特工</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">职业</span>
    </div>

    <!-- 页面标题 -->
    <div class="page-header">
      <div class="profession-info">
        <div 
          class="profession-icon"
          :style="{ backgroundImage: `url(${roleImg01})` }"
          @error="handleImageError"
        ></div>
        <div class="profession-text">
          <h1 class="profession-title">特工职业</h1>
          <p class="profession-description">特工阵营角色模型资源</p>
        </div>
      </div>
      <div class="profession-stats">
        <div class="stats-row">
          <div class="stat-item">
            <span class="stat-number">{{ professions.length }}</span>
            <span class="stat-label">个职业</span>
          </div>
          <!-- 返回上一级按钮 -->
          <button class="back-button" @click="$router.push('/gunz2/characters')">
            <span class="back-icon">⬅️</span>
            <span class="back-text">返回角色</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 职业网格 -->
    <transition name="fade" appear>
      <div v-if="run" class="professions-grid">
        <div 
          v-for="(profession, index) in professions" 
          :key="profession.id" 
          class="profession-card"
          :style="{ animationDelay: `${index * 0.1}s` }"
          @click="goTo(profession.href)"
        >
          <div class="card-content">
            <div class="profession-icon-container">
              <div 
                class="profession-icon-display"
                :style="{ backgroundImage: `url(${profession.icon})` }"
                @error="handleImageError"
              ></div>
            </div>
            
            <div class="profession-info">
              <h3 class="profession-title">{{ profession.title }}</h3>
              <p class="profession-description">{{ profession.description }}</p>
              <div class="profession-stats">
                <span class="stat-item">
                  <span class="stat-icon">⭐</span>
                  <span class="stat-text">精选</span>
                </span>
                <span class="stat-item">
                  <span class="stat-icon">🔧</span>
                  <span class="stat-text">可用</span>
                </span>
              </div>
            </div>
          </div>
          
          <!-- 卡片边框发光效果 -->
          <div class="card-glow"></div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.profession-list-container {
  padding: 20px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--accent-silver);
  flex-wrap: wrap;
}

.breadcrumb-item {
  cursor: pointer;
  transition: color 0.3s ease;
}

.breadcrumb-item:hover {
  color: var(--accent-blue);
}

.breadcrumb-item.active {
  color: var(--accent-blue);
  cursor: default;
}

.breadcrumb-separator {
  color: var(--accent-silver);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
}

.profession-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profession-icon {
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.profession-text {
  text-align: left;
}

.profession-title {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-blue), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 10px 0;
}

.profession-description {
  font-size: 18px;
  color: var(--accent-silver);
  margin: 0;
  font-weight: 300;
}

.profession-stats {
  text-align: right;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 15px;
  color: var(--accent-blue);
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-blue);
  text-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-silver);
}

.professions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 20px 0;
}

.profession-card {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  animation: fadeInUp 0.6s ease-out both;
  backdrop-filter: blur(10px);
}

.profession-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--accent-blue);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(79, 70, 229, 0.3);
}

.card-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  text-align: center;
}

.profession-icon-container {
  margin-bottom: 20px;
}

.profession-icon-display {
  width: 120px;
  height: 120px;
  margin: 0 auto 15px auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.profession-card:hover .profession-icon-display {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.profession-info {
  text-align: center;
}

.profession-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
}

.profession-description {
  font-size: 14px;
  color: var(--accent-silver);
  text-align: center;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.profession-stats {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 15px;
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-icon {
  font-size: 12px;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.profession-card:hover .card-glow {
  opacity: 1;
  animation: glow 2s ease-in-out infinite;
}

/* 返回按钮样式 */
.back-button {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(124, 58, 237, 0.2));
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 15px;
  color: var(--accent-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  height: fit-content;
}

.back-button:hover {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.3), rgba(124, 58, 237, 0.3));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.back-icon {
  font-size: 16px;
}

.back-text {
  font-size: 14px;
}

/* 动画效果 */
.fade-enter-active {
  animation: fadeInUp 0.8s ease-out;
}

.fade-leave-active {
  animation: fadeOutDown 0.5s ease-in;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .profession-info {
    gap: 15px;
  }
  
  .profession-icon {
    width: 50px;
    height: 50px;
  }
  
  .profession-title {
    font-size: 28px;
  }
  
  .profession-description {
    font-size: 16px;
  }
  
  .profession-stats {
    text-align: left;
    width: 100%;
  }
  
  .professions-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .card-content {
    padding: 20px;
  }
  
  .profession-icon-display {
    width: 80px;
    height: 80px;
  }
  
  .profession-title {
    font-size: 20px;
  }
  
  .breadcrumb {
    font-size: 11px;
    gap: 6px;
  }
  
  /* 移动端统计行优化 */
  .stats-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .stat-item {
    padding: 10px 14px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .stat-label {
    font-size: 12px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .profession-info {
    gap: 18px;
  }
  
  .profession-icon {
    width: 55px;
    height: 55px;
  }
  
  .profession-title {
    font-size: 32px;
  }
  
  .profession-description {
    font-size: 17px;
  }
  
  .profession-stats {
    text-align: left;
    width: 100%;
  }
  
  .professions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  
  .profession-info {
    gap: 20px;
  }
  
  .profession-icon {
    width: 58px;
    height: 58px;
  }
  
  .profession-title {
    font-size: 34px;
  }
  
  .profession-description {
    font-size: 18px;
  }
  
  .profession-stats {
    text-align: right;
  }
  
  .professions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

@media (min-width: 1025px) {
  .professions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .professions-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .profession-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .breadcrumb {
    font-size: 11px;
    gap: 6px;
  }
  
  .back-button {
    padding: 10px 14px;
    font-size: 12px;
  }
}
</style>

